<template>
  <div class="month-event-container">
    <div class="month-event-item-container">
      <div class="month-event-row">
        <div
          class=""
          v-for="(item, index) in deArr[rowIndex]"
          :key="item.id"
          @mouseenter.capture.self="levMouse($event, rowIndex, index, item)"
          @mouseleave.capture.self="levMouseOut($event, rowIndex, index)"
        >
          <div
            v-if="checkRank(item, rowIndex, index)"
            data-type="event"
            :class="[
              'month-event-cell',
              item.sameDay ? 'month-event-same-day' : '',
              item.active ? 'month-active' : '',
              item.id === drapCount ? 'month-active' : '',
              item.isEdit ? '' : 'month-event-disabled',
            ]"
            :style="getStyle(item, rowIndex, index)"
            :id="`ele${item.id}`"
            :data-rank="checkRank(item, rowIndex, index)"
            :data-index="index"
            :data-id="item.id"
            :data-row="rowIndex"
            :data-disabled="true"
            @mousedown="getEvent($event, index)"
            @mouseup="itemUp($event, item)"
            @mouseover="itemOver($event)"
          >
            <!-- class="animate__animated animate__fadeIn" -->
            <!-- {{ item.active }} -->
            <span
              v-if="item.relateItems && item.relateItems.length > 0"
              class="tag-name"
              @click.stop.prevent="jumpModel($event, index)"
              >
                {{ (item.relateItems && item.relateItems.length > 0) ? item.relateItems[0].label : '' }}
              </span>
            <span
              :class="['event-data']"
              :data-disabled="true"
              >
                <slot :targetType="item.targetType" :codeName="item.codeName" :state="item.state" :color="item.color" :title="item.title"></slot>
            </span>
            <slot :num="item.num" name="num"></slot>
            <!-- ({{ sameDay===true?"全天": item.startHour >= 43200 ? "下午" : "上午" }}) -->
          </div>
        </div>
      </div>
    </div>
    <div
      :class="[
        ticIndex === 1 ? 'mouse_box' : 'mouse_boxm1',
        'animate__animated animate__fadeIn',
        'duration',
      ]"
      @mouseenter.capture.self="levMouseEs($event)"
      @mouseleave.capture.self="levMouseOutEs($event)"
      v-show="v[rowIndex] && status"
      v-if="statusVip" 
      :style="{ left: leftModel, top: topModel }"
    >
      <div class="mouse_box_nav">
        <div class="title">
          <div class="title-header">
            
            <div class="showBtn">
              <el-button
                size="small"
                type="primary"
                link
                :icon="View"
                @click="readInfo(content)"
                >查看</el-button
              >
              <el-button
                v-if="content.state == 0 && content.sponsor.userId == userId"
                size="small"
                type="primary"
                link
                @click="editInfo(content)"
                ><edit-two
                  theme="outline"
                  size="14"
                  style="margin-right: 5px; margin-top: 2px"
                />编辑</el-button
              >
              <el-button
                v-if="content.state == 0 || content.state == 1"
                size="small"
                type="primary"
                link
                @click="completeEvent(content, rowIndex, contentIndex)"
                style="margin-left: 0; margin-top: 2px"
                ><done-all
                  theme="outline"
                  size="16"
                  style="margin-right: 5px"
                />完成</el-button
              >
              <el-button
                v-if="
                  content.state == -2 || 
                  (content.state == 0 && content.sponsor.id == userId) || 
                  (content.state == 1 && content.sponsor.id == userId) ||
                  content.state == 2 || content.state == 3 || content.state == 4 || content.state == 5
                  "
                size="small"
                type="danger"
                link
                style="margin-left: 0;  margin-top: 2px"
                @click="delEvent(content)"
                ><delete
                  theme="outline"
                  size="14"
                  style="margin-right: 5px; margin-top: 1px"
                />删除</el-button
              >
              <el-button 
                v-if="content.state == -1 && content.approverIds.includes(userId)"
                size="small"
                type="primary"
                link
                style="margin-left: 0; margin-top: 2px"
                @click="approverAccess(content)"
              >
                <el-icon><Check /></el-icon>
                通过
              </el-button>
              <el-button 
                v-if="content.state == -1 && content.approverIds.includes(userId)"
                size="small"
                type="danger"
                link
                style="margin-left: 0; margin-top: 2px"
                @click="approverReject(content)"
              >
                <close theme="outline" size="14" style="margin-right: 5px; margin-top: 1px" />
                拒绝
              </el-button>
            </div>
          </div>
          <p
            :class="['event-data toc', content.complete ? 'event-complete' : '']"
            :data-disabled="true"
            >
              <round 
                style="margin: 0 6px 0 2px"
                theme="filled" 
                size="8" 
                fill="#18a058" 
              />
              {{ content.title }}
          </p>
          <div class="timer">
            <el-icon style="margin-right: 8px;margin-top: 4px;" color="#18a058"><Calendar /></el-icon
            >{{ formatDurationTime(content) }} 
            <!-- {{ content.actionStartTime }} ~ {{ content.actionEndTime }} -->
          </div>
          <div class="timer">
            <el-icon style="margin-right: 8px;margin-top: 3px;" color="#18a058"><Avatar /></el-icon
            >{{ (content.relateItems && content.relateItems.length > 0) ? content.relateItems[0].label : '-' }}
          </div>
          <div class="timer">
            <el-icon style="margin-right: 8px;margin-top: 4px;" color="#18a058"><CollectionTag /></el-icon>
            <el-tag size="small">{{ content.codeName }}</el-tag>
          </div>
        </div>
      </div>
    </div>
    <div class="more-event-box" :style="{ top: `calc(${eleHeight}px - 20px)` }">
      <div
        v-for="item in rowArr"
        class="more-event-cell"
        :key="item"
        :style="{
          visibility: item[1].moreAnd > 0 ? 'visible' : 'hidden',
        }"
        @click="getInfo(item[0])"
      >
      <el-icon color="#18a058" :size="17" ><ele-CaretBottom /></el-icon>
        <!-- +{{ item[1].moreAnd }}更多事件 上午({{ item[1].toponther }}) 下午({{
          item[1].bottomonther
        }}) -->
      </div>
    </div>
    <div class="event-model-container" v-if="showMore">
      <div class="more-bg" @click="closeModel"></div>
      <div class="more-content" :style="moreData.position" id="moreOptions">
        <div class="more-title-options">
          <div class="more-time">{{ moreData.info.fullDate }}</div>
          <div class="more-close-btn" @click="closeModel">
            <close theme="outline" size="14" fill="#333" />
          </div>
        </div>
        <el-scrollbar>
          <div class="more-evnet-list">
            <div
              v-for="(item, index) in moreData.list"
              data-type="monthMore"
              :key="item.id"
              :class="[
                'more-event-item',
                item.active ? 'month-active' : '',
                item.id === drapCount ? 'month-active' : '',
                item.isEdit ? '' : 'more-event-disabled',
              ]"
              :style="{ color: item.color, backgroundColor: item.background }"
              :data-index="index"
              :data-id="item.id"
              :data-row="rowIndex"
              :data-day="day"
              @mousedown="getMoreEvent($event, index)"
              @mouseup="moreUp($event)"
              @mouseover="itemOver($event)"
            >
              <el-tag
                v-if="item.relateItems && item.relateItems.length > 0"
                size="small"
                style="margin-right: 5px"
                @click.stop.prevent="jumpModel($event, index)"
                >
                {{ (item.relateItems && item.relateItems.length > 0) ? item.relateItems[0].label : '' }}
              </el-tag>
              <el-popover
                :placement="placement"
                :width="270"
                trigger="hover"
                popper-class="event-detail-pop"
              >
                <template #reference>
                  <span
                    :class="['event-data more-event-data', item.state == 2 ? 'event-complete' : '']"
                    :data-disabled="true"
                  >
                    <slot :targetType="item.targetType" :codeName="item.codeName" :state="item.state" :color="item.color" :title="item.title"></slot>
                  </span>
                </template>
                <div class="event-detail">
                  <el-row
                    align="middle"
                    justify="start"
                    style="border-bottom: 1px solid #f0f0f0;padding-bottom: 5px;"
                  >
                    <el-button
                      size="small"
                      type="primary"
                      link
                      :icon="View"
                      @click="readInfo(content)"
                      >查看</el-button
                    >
                    <el-button
                      v-if="item.state == 0 && item.sponsor.userId == userId"
                      size="small"
                      type="primary"
                      link
                      @click="editInfo(item)"
                      ><edit-two
                        theme="outline"
                        size="14"
                        style="margin-right: 5px; margin-top: 2px"
                      />编辑</el-button
                    >
                    <el-button
                      v-if="item.state == 0 || item.state == 1"
                      size="small"
                      type="primary"
                      link
                      @click="completeEvent(item, rowIndex, index)"
                      style="margin-left: 0; margin-top: 2px"
                      ><done-all
                        theme="outline"
                        size="16"
                        style="margin-right: 5px"
                      />完成</el-button
                    >
                    <el-button
                      v-if="
                        item.state == -2 || 
                        (item.state == 0 && item.sponsor.id == userId) || 
                        (item.state == 1 && item.sponsor.id == userId) ||
                        item.state == 2 || item.state == 3 || item.state == 4 || item.state == 5
                      "
                      size="small"
                      type="danger"
                      link
                      style="margin-left: 0"
                      @click="delEvent(item)"
                      ><delete
                        theme="outline"
                        size="14"
                        style="margin-right: 5px; margin-top: 1px"
                      />删除</el-button
                    >
                    <el-button 
                      v-if="item.state == -1 && item.approverIds.includes(userId)"
                      size="small"
                      type="primary"
                      link
                      style="margin-left: 0; margin-top: 2px"
                      @click="approverAccess(item)"
                    >
                      <el-icon><Check /></el-icon>
                      通过
                    </el-button>
                    <el-button 
                      v-if="item.state == -1 && item.approverIds.includes(userId)"
                      size="small"
                      type="danger"
                      link
                      style="margin-left: 0; margin-top: 2px"
                      @click="approverReject(item)"
                    >
                      <close theme="outline" size="14" style="margin-right: 5px; margin-top: 1px" />
                      拒绝
                    </el-button>
                  </el-row>
                  <el-row justify="start" style="margin: 10px 0;flex-wrap: nowrap;">
                    <round 
                      style="margin: 0 6px 0 2px"
                      theme="filled" 
                      size="8" 
                      fill="#18a058" 
                    />
                    <div class="event-detail-data">{{ item.title }}</div>
                  </el-row>
                  <el-row  justify="start" style="flex-wrap: nowrap;">
                    <calendar-dot theme="outline" size="14" />
                    <div class="event-detail-data">
                      {{ formatDurationTime(item) }}
                      <!-- {{ item.actionStartTime }} ~ {{ item.actionEndTime }} -->
                    </div>
                  </el-row>
                  <el-row  justify="start" style="margin-top: 5px;flex-wrap: nowrap;">
                    <user theme="outline" size="14" />
                    <div class="event-detail-data">{{ (item.relateItems && item.relateItems.length > 0) ? item.relateItems[0].label : '-' }}</div>
                  </el-row>
                  <el-row justify="start" style="margin-top: 5px;">
                    <el-icon style="margin-right: 8px;margin-top: 4px;" color="#18a058"><CollectionTag /></el-icon>
                    <el-tag size="small">{{ item.codeName }}</el-tag>
                  </el-row>
                </div>
              </el-popover>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Close,
  Drag,
  CalendarDot,
  User,
  EditTwo,
  DoneAll,
  Delete,
  Calendar,
  Avatar,
  Round,
  Pennant,
  FileDateOne
} from "@icon-park/vue-next";
import { CollectionTag, Check, View } from '@element-plus/icons-vue'
import { toRefs, onMounted, watch, ref, computed, nextTick, inject } from "vue";
// eslint-disable-next-line no-unused-vars
import {
  getAnyTimeEvent,
  resetTime,
  formatTime,
  getAnyTimeEventNumber,
  getOverNUmber,
} from "../lib/event";
import {
  overWei,
  warningEvent
} from "../lib/eventsame.ts";
import { ElMessage } from "element-plus";
// eslint-disable-next-line no-unused-vars
import { mathNumber, format, formatShortTime } from "../lib/utils";
import "animate.css";
import { homeApi } from "/@/api/home/index";
import Cookies from 'js-cookie'
export default {
  name: "EventMonthItem",
  //   inject:['status'],
  props: {
    show_newData: {
      type: Boolean,
      default: true,
    },
    drapCount: {
      type: String,
      default: '-1',
    },
    // drapIndex: {
    //   type: Number,
    //   default: -1,
    // },
    events: {
      type: Array,
      default() {
        return [];
      },
    },
    month: {
      type: Object,
      default() {
        return {};
      },
    },
    rowIndex: {
      type: Number || String,
      default: null,
    },
    cube: {
      type: Object,
      default() {
        return {};
      },
    },
    dropData: {
      type: Object,
      default() {
        return {};
      },
    },
    vipToast: {
      type: Boolean,
      default: true,
    },
    v: {
      type: Array,
      default: [false, false, false, false, false],
    },
    qq: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Close,
    Drag,
    CalendarDot,
    User,
    EditTwo,
    DoneAll,
    Delete,
    Calendar,
    Avatar,
    Round,
    Pennant,
    CollectionTag,
    FileDateOne,
    Check
  },
  emits: [
    "closeModal",
    "getMonthEvent",
    "delEvent",
    "editInfo",
    "moreEventHandle",
    "vipFunction",
    "k",
    "langEvent",
    "q",
    "emupdateActive",
    "loadingRefers"
  ],
  setup(props, context) {
    const { events, month, rowIndex, dropData, qq } = toRefs(props);
    const homeCalendar = homeApi();
    let dropMessage = ref(dropData.value);
    // 获取当月数据
    let deArr = ref([]);
    let transDataBing;
    // let isDrap = ref(false)
    let rowArr = ref([]);
    let showMore = ref(false);
    let moreData = ref([]);
    let eleHeight = ref(0);
    let day = ref(0);
    let current = ref(null); // 当前选中的事件
    // let dropStartX = ref(0)
    // let dropStartY = ref(0)
    let dropIndex = -1;
    // let dropOffsetLeft = ref(0)
    // let dropOffsetTop = ref(0)
    let clickStart = ref(0);
    let drapInfo = ref({});
    let canUp = true;
    let placement = ref("bottom-start");
    let dayHalfHeight = 0;
    let eventModel = 0; // 事项详情的model是否鼠标进入
    const userId = Cookies.get('userId')
    if (document.querySelector(".day-cube")) {
      dayHalfHeight = document.querySelector(".day-cube").offsetHeight;
    }
    const getMonthEvent = () => {
      for (let i = 0; i < month.value.length; i++) {
        const start = month.value[i][0].fullDate;
        const end = new Date(
          month.value[i][month.value[i].length - 1].fullDate + " 23:59:59"
        ).getTime();
        deArr.value[i] = getAnyTimeEvent(
          start,
          events.value,
          "time",
          end - new Date(start).getTime()
        );
      }
      let transData = JSON.stringify(deArr.value);
      transDataBing = JSON.parse(transData);
    };
    const getStyle = computed(() => {
      return (item, index, aindex) => {
        let position = {
          left: getLeft(item, index),
          top: getTop(item, index, aindex),
          width: getWidth(item, index),
          background: item.active ? `${item.background} !important` : item.background,
          color: item.color,
          boxShadow: item.boxShadow,
          display: "flex",
          "align-items": "center",
        };
        return {
          ...position,
        };
      };
    });
    // 格式化时间
    const formatDurationTime = computed(() => {
      return item => {
        if(!item.actionStartTime) return ''
        return formatShortTime(item)
      }
    })
    // 注入响应式的值
    let status = inject("status");
    let statusUserUs = inject("statusUserUs");

    // 获取当前事件在当天排行 按id
    const checkRank = computed(() => {
      return (e, index, aindex) => {
        const dayEvent = transDataBing[index];
        let currentDayEvent = getAnyTimeEventNumber(e.startDate, dayEvent); // 当天的事件
        // 去掉0点的 还有
        // let top = 0;
        const halfNum = Math.floor(dayHalfHeight / 20); // 每半个格子可显示的数量
        let yes = [];
        let no = [];
        // let halfArr = [];
        // let halfMorning = 0;
        // let halfAfter = 0;
        // let overDataMin = JSON.parse(JSON.stringify(currentDayEvent));
        // for(let i =0;i<overDataMin.length;i++){
        //   // hours
        //   let hours = overDataMin[i].hours.split("-");
        //   let hoursStart =hours[0].trim()
        //   let hoursEnd =hours[1].trim()
        //   if(hoursStart==="00:00:00"&&hoursEnd==="00:00:00"&&overDataMin[i].endDate===e.startDate){
        //     debugger
        //     // 说明是一天啦
        //     let IndexIS = currentDayEvent.findIndex((item,index)=>{
        //       return item.id === overDataMin[i].id
        //     })
        //     currentDayEvent.splice(IndexIS,1)
        //   }
        // }
        // 这边已经算好时间了
        currentDayEvent.sort((a, b) => {
          if (a.startHour > b.startHour) {
            return 1;
          } else {
            return -1;
          }
        });

        // if(e.id==="1640277400012414977"){
        //   debugger
        // }
        // if(e.id==="1640281923548327937"){
        //   debugger
        // }
        // if(e.id==="1640275805585498114"){
        //   debugger
        // }
        // if(e.id==="1640277400012414977"){
        //   debugger
        // }
        // let jjboy = currentDayEvent;
        // let orangeArr =[];
        // let onthers = [];
        // for(let p = 0 ; p <jjboy.length;p++){
        //   if(Number(jjboy[p].priority)===1){
        //     orangeArr.push(jjboy[p])
        //   }else{
        //     onthers.push(jjboy[p])
        //   }
        // }

        // let arr = orangeArr.concat(onthers);
        let arr = currentDayEvent;
        // 先把重要的放在前面
       
        let moring = [];
        let afternone = [];
        let onther = [];
        // 上午下午其他区域
        for (let o = 0; o < arr.length; o++) {
          if (arr[o].startHour >= 43200) {
            // 下午
            if (afternone.length >= 3) {
              // 依次填入onther里
              onther.push(arr[o]);
            } else {
              // 依次填入afternone
              afternone.push(arr[o]);
            }
          } else if (arr[o].startHour < 43200) {
            if (moring.length >= 3) {
              onther.push(arr[o]);
            } else {
              moring.push(arr[o]);
            }
          } else {
            onther.push(arr[o]);
          }
        }
        if (moring.length < halfNum) {
          let numberMoring = halfNum - moring.length;
          for (let r = 0; r < numberMoring; r++) {
            moring.push({ id: r });
          }
        }
        if (afternone.length < halfNum) {
          let numberMoring = halfNum - afternone.length;
          for (let t = 0; t < numberMoring; t++) {
            afternone.push({ id: t + 3 });
          }
        }
        // 在这里进行判断重要是否
       
        let postArr = moring.concat(afternone).concat(onther);
        for (let j = 0; j < postArr.length; j++) {
          if (postArr[j].index != undefined) {
            yes.push(postArr[j]);
          } else {
            no.push(postArr[j]);
          }
        }
        yes.sort((a, b) => {
          if (a.index > b.index) {
            return 1;
          } else {
            return -1;
          }
        });
        let postWork = no.concat(yes);
        for (let e = 0; e < yes.length; e++) {
          postWork.splice(yes[e].index, 0, yes[e]);
        }
        const items = new Set(postWork);
        // let arrSelect = Array.from(items);
        let arrSelectc = Array.from(items);
       // 在这里调用重要事项筛选，将事项筛选出来 分上下午
       let  arrSelect
        if(onther.length>0){
          arrSelect =  warningEvent(arrSelectc,halfNum);
        }else{
          arrSelect = arrSelectc
        }
        // 顺序已经全部布阵到位了 将index添加进入
        let indexBing = arrSelect.findIndex((item, index) => {
          return e.id === item.id;
        });
        // if(e.id==="")

        if(e.startHour < 43200){
          if(indexBing>halfNum-1){
            indexBing = halfNum*2
          }
        }

        // 这边判断是否断尾
        // const morningIndex = moring.findIndex((item,index)=>{
        //   return item.id.length>3
        // })
        // const afternoneIndex = afternone.findIndex((item,index)=>{
        //   return item.id.length>3
        // })
        if(e.startHour >= 43200){
          // 下午判断断尾巴
          // if(e.kua === 1){
          //   if(morningIndex===-1&&indexBing<=5&&(e.index==undefined)){
          //   // 上午的全部断尾
          //   /**
          //    * 将上午数据全部取出
          //    * 在断尾方法里往后移动一天
          //    * 给他赋值新的参数,下次不会重复断尾操作
          //    * */
          //   // if()

          // let overData =  overWei(month.value,afternone,index,aindex,dayEvent,e);
          // // if(e.id==="1636633838368468994"){
          // //   debugger
          // // }
          // // if(overData===undefined){
          // //   debugger
          // // }
          // if(overData.over){
          //   if(overData.overWei){
          //    let indexsIng = indexBing===3?0:indexBing===4?1:indexBing===5?2:'';
          //     // transDataBing[index][aindex].index = indexsIng;
          //     deArr.value[index][aindex].index = indexsIng;
          //   }else{
          //     overData.day.index = indexBing===3?0:indexBing===4?1:indexBing===5?2:'';
          //     transDataBing[index][aindex] = overData.day;
          //     if(overData.pushStatus){
          //       let idx = transDataBing[index].findIndex((item,index)=>{
          //         return item.id === overData.baseDay.id
          //       })
          //       if(idx===-1){
          //         // transDataBing[index].push(overData.baseDay)
          //         deArr.value[index].push(overData.baseDay)
          //       }
          //       // overData.baseDay.id=overData.baseDay.id+overData.baseDay.id
          //     }

          //   // deArr.value = transDataBing;
          //   }

          // }
          // }else{
          //   // 下午的全部断尾
          // }
          // }

        }
        if (indexBing > halfNum * 2 - 1) {
          // debugger
          if (e.kua === 1) {
            // 先把今天的id打出来
            // 再把明天的id也打出来
            // 检索 如果 明天存在今天的id,
            // let ud = [];
            // 尝试用伪类的形式往后推一天
            // e.weiZaoStart = e.start + 86400;
            // debugger
            // 在这里尝试顺延一位
            // let copyData = {}
            // for(let k in e){
            //   copyData[k] = e[k]
            // }

            if (e.kua === 1) {
              const dataIs = moreYan(e, index, halfNum);
              // 将他完全转换为这个数据 嘿嘿嘿 okMonth:okMonth
              // 只是转换

              if (dataIs.ok) {
                let copyData = {};
                for (let k in e) {
                  copyData[k] = e[k];
                }
                let newTime = new Date(dataIs.okMonth + " " + e.hours.split("-")[0]);
                copyData.startDate = dataIs.okMonth;
                const timeStart = new Date(dataIs.okMonth + " 00:00:00").getTime();
                if (isNaN(newTime) || newTime < timeStart) {
                  return false;
                }
                let actionStartTime = format(new Date(newTime), "yyyy-MM-dd HH:mm:ss");
                copyData.start = new Date(actionStartTime).getTime();
                const startHour = actionStartTime.split(" ")[1];
                const startHourSplit = startHour.split(":");
                copyData.startHour =
                  Number(startHourSplit[0]) * 60 * 60 +
                  Number(startHourSplit[1]) * 60 +
                  (Number(startHourSplit[2]) ? Number(startHourSplit[2]) : 0);
                copyData.release = copyData.end - copyData.start;

                transDataBing[index][aindex] = copyData;
                deArr.value = transDataBing;
                return true;
              } else {
                return false;
              }
              // debugger
            } else {
              return false;
            }
            // transDataBing[index][aindex] = copyData;
            // deArr.value = transDataBing;
            // 在这里尝试获取是否有顺延机会
            // 拿到此类数据
            // let currentDayEvent = getAnyTimeEventNumber(e.startDate, dayEvent); // 当天的事件
            // 增加一天事件
            // for(let ddd = 0 ; ddd<postWork.length;ddd++){
            //   ud.push(postWork[ddd].id);
            // }
          }else{
            return false;
          }
        } else {
          if (indexBing > halfNum * 2 - 1) {
            return false;
          } else {
            return true;
          }
        }
      };
    });

    // 是否有顺延机会 太消耗性能 尝试搏一把
    const moreYan = (e, index, maxdata) => {
      let dayEvent = transDataBing[index];
      // 只检索一周性能,过了这周就不再检索
      // 从周一检索到周末 因为获取不到对应的值
      // 当然从第一天开始检索
      // 获取month 数据
      let monthData = month.value[index];
      let indexNow = monthData.findIndex((item, index) => {
        return e.startDate === item.fullDate;
      });
      if (indexNow == -1) {
        indexNow = 0;
        // 说明不在这一行
        // 检索下一行
        // let monthData1 =  month.value[index+1];
        //   let indexNow1 = monthData1.findIndex((item,index)=>{
        //   return e.endDate === item.fullDate
        // })
        // if(indexNow1===-1){
        //   // 没有说明下下行 有的话就是这一行
        //   // 就这行说明从0开始遍历哇
        //   indexNow = 0;

        // }else{
        //   indexNow = indexNow1
        // }
        // monthData = monthData1;
        // dayEvent =  transDataBing[index+1]
      }
      // 第几周的数据之后处理顺延数据 检索列表最大值且超过上午为3下午为3
      /**
       * 排序操作
       * 分为上午3下午3
       * 将index插入数组中
       * 检索是否在6位置里
       * 如果有直接把数据放到该有的位置
       */
      // 循环往后顺延一位,如果符合,直接将数据更改,静态数据改变,赋值给响应式数据
      // let dataBase = getAnyTimeEventNumber(e.startDate, dayEvent); // 当天的事件
      let okThisFunction = false;
      let okMonth = 0;
      for (let i = indexNow; i < 7; i++) {
        // 当天的事件是多少
        let dataBase = getAnyTimeEventNumber(monthData[i].fullDate, dayEvent); // 当天的事件
        if (monthData[i].fullDate === e.endDate) {
          break;
        }
        okMonth = monthData[i].fullDate;
        let m = [];
        let d = [];
        let o = [];
        // let pp = [];
        // 分为上午下午其他
        for (let l = 0; l < dataBase.length; l++) {
          if (dataBase[l].startHour >= 43200) {
            d.push(dataBase[l]);
          } else if (dataBase[l].startHour < 43200) {
            m.push(dataBase[l]);
          } else {
            o.push(dataBase[l]);
          }
        }
        // 先确定是上午下午就行了
        if (e.startHour >= 43200) {
          // 直接看数据e在下午表现如何
          // 先二分查找indexs最大的值
          let max = 0;
          let maxnumber = 0;
          //没有index的数量
          let mb = [];

          for (let i = 0; i < d.length; i++) {
            if (d[i].index != undefined) {
              maxnumber = maxnumber + 1;
              if (d[i].index > max) {
                max = d[i].index;
              }
            } else {
              mb.push(d[i]);
            }
          }
          if (maxnumber < maxdata) {
            // 排序
            mb.sort((a, b) => {
              if (a.startHour > b.startHour) {
                return 1;
              } else {
                return -1;
              }
            });
            let wxIndex = mb.findIndex((item, index) => {
              return e.id === item.id;
            });
            if (maxnumber === 2) {
              if (wxIndex === 0) {
                // 进入前三了
                okThisFunction = true;
                break;
              } else {
                // 其他的都没戏了
              }
            } else if (maxnumber === 1) {
              if (wxIndex <= 1) {
                // 进入前三了
                okThisFunction = true;
                break;
              }
            } else if (maxnumber === 0) {
              // 那这样就发财了
              if (wxIndex <= 2) {
                // 进入前三了
                okThisFunction = true;
                break;
              }
            }
          } else if (d.length < maxdata) {
            // 有戏的n种情况 第一种就是下午的数据少于3,第二种index少于2,但是e 在数据前  第三种情况,e排序在前面
            // 有戏 返回
            okThisFunction = true;
            break;
          }
        } else {
          // 上午看这里
          // 直接看数据e在下午表现如何
          // 先二分查找indexs最大的值
          let max = 0;
          let maxnumber = 0;
          //没有index的数量
          let mb = [];

          for (let i = 0; i < m.length; i++) {
            if (m[i].index != undefined) {
              maxnumber = maxnumber + 1;
              if (m[i].index > max) {
                max = m[i].index;
              }
            } else {
              mb.push(m[i]);
            }
          }
          if (maxnumber < maxdata) {
            // 排序
            mb.sort((a, b) => {
              if (a.startHour > b.startHour) {
                return 1;
              } else {
                return -1;
              }
            });
            let wxIndex = mb.findIndex((item, index) => {
              return e.id === item.id;
            });
            if (maxnumber === 2) {
              if (wxIndex === 0) {
                // 进入前三了
                okThisFunction = true;
                break;
              } else {
                // 其他的都没戏了
              }
            } else if (maxnumber === 1) {
              if (wxIndex <= 1) {
                // 进入前三了
                okThisFunction = true;
                break;
              }
            } else if (maxnumber === 0) {
              // 那这样就发财了
              if (wxIndex <= 2) {
                // 进入前三了
                okThisFunction = true;
                break;
              }
            }
          } else if (m.length < maxdata) {
            // 有戏的n种情况 第一种就是下午的数据少于3,第二种index少于2,但是e 在数据前  第三种情况,e排序在前面
            // 有戏 返回
            okThisFunction = true;
            break;
          }
        }
      }
      // let okThisFunction = false;
      // let okMonth = 0;
      if (okThisFunction === true) {
        return {
          okMonth: okMonth,
          ok: true,
        };
      } else {
        return {
          ok: false,
        };
      }
    };

    const getLeft = (e, index) => {
      let left = 0;
      if (e.sameDay) {
        // 同一天
        const day = e.startDay == 0 ? 7 : e.startDay;
        left = `calc(${((day - 1) * 100) / 7}% + 5px)`;
      } else {
        // 非同一天, 甚至有多天的事件
        left = getWeekHeaderEnd(e, index).left;
      }
      return left;
    };
    const getWidth = (e, index) => {
      let width = 0;
      // 重写这里
      if (e.sameDay) {
        // 这里并不科学 || (e.end - e.start) / 1000 <= 86400
        // 肯定是这里判断导致width失效的 这是一天的事件
        width = `calc(100% / 7 - 10px)`;
      } else {
        width = getWeekHeaderEnd(e, index).width;
      }
      return width;
    };

    // 重写获取顶部逻辑
    const getTop = (e, index, aindex) => {
      const dayEvent = transDataBing[index];
      let currentDayEvent = getAnyTimeEventNumber(e.startDate, dayEvent); // 当天的事件

      let top = 0;
      const halfNum = Math.floor(dayHalfHeight / 20); // 每半个格子可显示的数量

      let yes = [];
      let no = [];
      
      currentDayEvent.sort((a, b) => {
        if (a.startHour > b.startHour) {
          return 1;
        } else {
          return -1;
        }
      });
      let arr = currentDayEvent;
      let moring = [];
      let afternone = [];
      let onther = [];
      // 上午下午其他区域
      for (let o = 0; o < arr.length; o++) {
        if (arr[o].startHour >= 43200) {
          // 下午
          if (afternone.length >= 3) {
            // 依次填入onther里
            onther.push(arr[o]);
          } else {
            // 依次填入afternone
            afternone.push(arr[o]);
          }
        } else if (arr[o].startHour < 43200) {
          if (moring.length >= 3) {
            onther.push(arr[o]);
          } else {
            moring.push(arr[o]);
          }
        } else {
          onther.push(arr[o]);
        }
      }
       // 先把上午重要的筛选出来
      if (moring.length < halfNum) {
        let numberMoring = halfNum - moring.length;
        for (let r = 0; r < numberMoring; r++) {
          moring.push({ id: r });
        }
      }
      if (afternone.length < halfNum) {
        let numberMoring = halfNum - afternone.length;
        for (let t = 0; t < numberMoring; t++) {
          afternone.push({ id: t + 3 });
        }
      }
     
      let postArr = moring.concat(afternone).concat(onther);
      for (let j = 0; j < postArr.length; j++) {
        if (postArr[j].index != undefined) {
          yes.push(postArr[j]);
        } else {
          no.push(postArr[j]);
        }
      }
      yes.sort((a, b) => {
        if (a.index > b.index) {
          return 1;
        } else {
          return -1;
        }
      });
      let postWork = no.concat(yes);
      for (let e = 0; e < yes.length; e++) {
        postWork.splice(yes[e].index, 0, yes[e]);
      }
      const items = new Set(postWork);   
      let arrSelectc = Array.from(items);
       // 在这里调用重要事项筛选，将事项筛选出来 分上下午
       let arrSelect ;
        if(onther.length>0){
          arrSelect =  warningEvent(arrSelectc,halfNum);
        }else{
          arrSelect = arrSelectc
        }
      // 顺序已经全部布阵到位了 将index添加进入
      const indexBing = arrSelect.findIndex((item, index) => {
        return e.id === item.id;
      });
      if ((e.kua === 1) & (e.index === undefined)&(indexBing>=0&&indexBing<6)) {
        // 将index 位置填入数组内部
        if (indexBing <= halfNum * 2 - 1) {
          transDataBing[index][aindex].index = indexBing;
        }
      }
      deArr.value = transDataBing;
      if (e.startHour >= 43200) {
        top = `calc(${dayHalfHeight}px + 20px * ${indexBing - halfNum}`;
      } else {
        top = `calc(20px * ${indexBing})`;
      }
      // console.log(deArr.value);

      return top;
    };

    // 获取周的开头结尾在哪里: current 当天周; next 下周; num: 当前周内有多少天
    const getWeekHeaderEnd = (e, index) => {
      const len = month.value[index].length;
      const startWeek = new Date(month.value[index][0].fullDate + " 00:00:00").getTime();
      const endWeek = new Date(
        month.value[index][len - 1].fullDate + " 23:59:59"
      ).getTime();
      // 计算结束时间到开始时间有多少天
      // 以下这里是错误的： 一天的时长是00：00 到 23：59；
      // 天数应该把第一天和最后一天加起来计算 00：00 - 第二天00：00 也算一天 但是0：01-第二天0：01就不算一天了
      /**
       * 先判断一天到开始时间是多少
       * 在判断结束时间-开始时间用了多久
       * 如果 是0点开始但是是86400秒之内就是一天,如果不是就按两条算
      */
      // let  diff = Math.ceil((e.end - e.start) / 1000 / 86400);
     
      let  diff = 0;
      // 算出一天剩余的时间
      // const  spDiffStart  = e.actionStartTime.split(" ")[1];
      const  spDiffEnd = e.actionEndTime.split(" ")[1];
      let theDaya = 0
      if(spDiffEnd === "00:00:00" && spDiffEnd === "00:00:00"){
        // 只算时间相减
        diff = Math.ceil((e.end - e.start) / 1000 / 86400);
        theDaya = 1 
      }else {
        // 这里要把时间计算出天数
        // e.startHour>0&&Math.round(Math.abs((e.end - e.start) / 1000 / 86400))>=1;
        // 把今天的时间计算出来 加到明天
        let todayTime =  new Date(e.startDate + " 00:00:00").getTime() + 86400000;
        // 计算出今天剩余时间
        let todayOverDay = todayTime  -   e.start;
        // 如果开始时间减去结束时间大于剩余时间就为n天之后
        if(e.end - e.start > todayOverDay){
          // 这里就要写n天逻辑
          // 如果 e.end - e.start >= 86400000 为2天 其余为 Math.ceil((e.end - e.start) / 1000 / 86400) 天
          if(e.end - e.start >= 86400000){
            diff = 2
          }else{
            // 这里掐头去尾除以86400000算天数
            const timerSure = e.end - e.start - todayOverDay - e.endHour;
            diff = timerSure / 1000 / 86400
            diff = diff + 2
          }
        }
      }
      diff = Math.floor(diff)
      let width = 0;
      let left = 0;
      if (startWeek <= e.start && endWeek >= e.end && diff <= 7) {
        const day = new Date(e.start).getDay() == 0 ? len : new Date(e.start).getDay();
        width = `calc(100% / ${len} * ${diff} - 10px)`;
        left = `calc(100% / ${len} * ${day - 1} + 5px)`;
       } else {
        // 开头在当前周， 日期大于当前周的第一天的时间,且小于结尾的时间 那么它就在当前周
        if (startWeek <= e.start && e.start <= endWeek) {
          // 获取当前周内有几天
          const currentDay =
            new Date(e.start).getDay() == 0 ? len : new Date(e.start).getDay();
          const diffDay = Math.ceil(len - currentDay + 1);
          width = `calc(100% / ${len} * ${diffDay} - 10px)`;
          left = `calc((100% / ${len}) * ${len - diffDay} + 5px)`;
        } else if (startWeek >= e.start) {
          // 开头不在当前周, 日期小于当前周的第一天, 必然在上一周
          left = `5px`;
          let currentDay =
            new Date(e.end).getDay() == 0 ? len : new Date(e.end).getDay();
            if(theDaya===1){
              if(currentDay===1){
                // 说明在第一天
                // 这个是不存在的 这个不会显示
              }else{
                currentDay = currentDay - 1
              }
            }
          
          if (endWeek <= e.end) {
            // 结尾在下周, 结尾大于当前周的结尾时间, 肯定在下周
            width = `calc(100% / ${len} * ${len} - 10px)`;
          } else {
            width = `calc(100% / ${len} * ${currentDay} - 10px)`;
          }
        }
      }
      return {
        left,
        width,
      };
    };
    // 获取rowIndex的事件合集
    const getCurrentWeek = () => {
      const len = month.value[rowIndex.value].length;
      let deArr = new Array();
      for (let i = 0; i < len; i++) {
        const updateData = getOverNUmber(
          month.value[rowIndex.value][i].fullDate,
          events.value
        );
        deArr.push([i, updateData]);
      }
      rowArr.value = deArr;
    };
    // 点击更多事件
    const getInfo = (index) => {
      showMore.value = true;
      let position = {
        left: `calc(100% / 7 * ${index})`,
      };
      if (rowIndex.value == month.value.length - 1) {
        // 最下面一行
        position["bottom"] = -eleHeight.value + "px";
        position["top"] = "unset";
      }
      if (index == 6) {
        position.left = "unset";
        position["right"] = "0";
      }
      moreData.value["position"] = position;
      moreData.value["info"] = month.value[rowIndex.value][index];
      moreData.value["list"] = getAnyTimeEvent(
        month.value[rowIndex.value][index].fullDate,
        events.value
      );
      day.value = index;
      drapInfo.value = null;
      context.emit("moreEventHandle", index);
    };
    // eslint-disable-next-line no-unused-vars
    const getMoreEvent = (e, index) => {
      if (e.target.dataset.disabled) return;
      clickStart.value = new Date().getTime();
      drapInfo.value = e;
      canUp = true;
      dropIndex = index;
      moreData.value.list[index].active = true;
      setTimeout(() => {
        if (canUp) {
          moreDrag(e, index);
        }
      }, 350);
    };
    // eslint-disable-next-line no-unused-vars
    const moreDrag = (event, index) => {
      if (!moreData.value.list[index].isEdit) {
        return false;
      }
      // return
      const startX = event.clientX;
      const startY = event.clientY;
      let disX = startX - event.target.offsetLeft;
      let disY = startY - event.target.offsetTop;
      const cubeWidth = document.querySelectorAll(".month-date")[0].clientWidth;
      const cubeHeight = document.querySelectorAll(".month-date")[0].clientHeight;
      const day = moreData.value.info.lunar.nWeek - 1;
      const row = event.target.dataset.row;
      document.onmousemove = (ev) => {
        if (canUp && dropIndex > -1) {
          let e = ev || window.event;
          let l = e.clientX - disX;
          let h = e.clientY - disY;
          l = range(l, -day * cubeWidth - 20, (6 - day) * cubeWidth);
          h = range(
            h,
            -row * cubeHeight,
            (6 - row) * cubeHeight - event.target.offsetHeight
          );
          event.target.style.position = `absolute`;
          event.target.style["z-index"] = `5`;
          event.target.style.left = `${l}px`;
          event.target.style.top = `${h}px`;
        }
      };
      document.onmouseup = (ev) => {
        document.onmousemove = null;
        if (canUp && dropIndex > -1) {
          canUp = false;
          moreData.value.list[index].active = false;
          showMore.value = false;
          let e = ev || window.event;
          let d = Math.floor((e.clientX - disX) / cubeWidth); // 移动的距离
          let h = Math.floor((e.clientY - disY - 41) / cubeHeight) + 1; // 移动的高度
          const item = moreData.value.list[index];
          if (!item.isEdit) {
            return false;
          }
          const _Index = events.value.findIndex((e) => {
            return e.id == item.id;
          });
          // console.log(month.value[month.value.length - 1]);
          const _newRow = Number(row) + Number(h);
          const _newLeft = Number(moreData.value.info.lunar.nWeek) + d - 1;
          let newTime = new Date(
            month.value[_newRow][_newLeft].fullDate +
              " " +
              events.value[_Index].hours.split("-")[0]
          );
          const timeStart = new Date(month.value[0][0].fullDate + " 00:00:00").getTime();
          const timeEnd = new Date(
            month.value[month.value.length - 1][6].fullDate + " 23:59:59"
          ).getTime();
          if (
            isNaN(newTime) ||
            newTime < timeStart ||
            (newTime > timeEnd && _Index > -1)
          ) {
            return false;
          }
          events.value[_Index].actionStartTime = format(
            new Date(newTime),
            "yyyy-MM-dd HH:mm"
          );
          events.value[_Index].actionEndTime = format(
            new Date(
              new Date(events.value[_Index].actionStartTime).getTime() + item.release
            ),
            "yyyy-MM-dd HH:mm"
          );

          events.value[_Index].start = new Date(
            events.value[_Index].actionStartTime
          ).getTime();
          events.value[_Index].end = new Date(
            events.value[_Index].actionEndTime
          ).getTime();
          events.value[_Index] = formatTime(events.value[_Index]);
          getCurrentWeek();
          context.emit("exchangeDate", events.value[_Index]);
          canUp = false;
          deArr.value[rowIndex.value][dropIndex].active = false;
        }
      };
    };
    const moreUp = () => {
      document.onmousemove = null;
      const end = new Date().getTime();
      if (end - clickStart.value < 350) {
        context.emit("getMonthEvent", drapInfo.value);
        canUp = false;
        if (dropIndex > -1) {
          moreData.value.list[dropIndex].active = false;
          deArr.value[rowIndex.value][dropIndex].active = false;
        }
      }
    };
    let statusVip = ref(true);

    //判断是否跨周
    // let kuaData = (data, index) => {
    //   const datas = data;
    //   const len = month.value[index].length;
    //   const startWeek = new Date(month.value[index][0].fullDate + " 00:00:00").getTime();
    //   const endWeek = new Date(
    //     month.value[index][len - 1].fullDate + " 23:59:59"
    //   ).getTime();
    //   const endWeekDate = month.value[index][6].fullDate;

    //   let  diff = 0;
    //   // 算出一天剩余的时间
    //   // const diffStart = 86400-(e.startHour);
    //   // const diffEnd = 
    //   const  spDiffStart  = datas.actionStartTime.split(" ")[1];
    //   const  spDiffEnd = datas.actionEndTime.split(" ")[1];
    //   if(spDiffEnd==="00:00:00"&&spDiffEnd==="00:00:00"){
    //     // 只算时间相减
    //     diff = Math.ceil((datas.end - datas.start) / 1000 / 86400);
    //   }else {
    //     // 这里要把时间计算出天数
    //     // e.startHour>0&&Math.round(Math.abs((e.end - e.start) / 1000 / 86400))>=1;
    //     // 把今天的时间计算出来 加到明天
    //     let todayTime =  new Date(datas.startDate + " 00:00:00").getTime() + 86400000;
    //     // 计算出今天剩余时间
    //     let todayOverDay = todayTime  -   datas.start;
    //     // 如果开始时间减去结束时间大于剩余时间就为n天之后
    //     if(datas.end - datas.start > todayOverDay){
    //       // 这里就要写n天逻辑
    //       // 如果 e.end - e.start >= 86400000 为2天 其余为 Math.ceil((e.end - e.start) / 1000 / 86400) 天
    //       if(datas.end - datas.start >= 86400000){
    //         diff = 2
    //       }else{
    //         // 这里掐头去尾除以86400000算天数
    //         const timerSure = datas.end - datas.start - todayOverDay - datas.endHour;
    //         diff = timerSure / 1000 / 86400
    //         diff = diff + 2
    //       }
    //     }

    //   }



    //   // 计算结束时间到开始时间有多少天
    //   // const diff = Math.ceil((datas.end - datas.start) / 1000 / 86400);
    //   if (startWeek <= datas.start && datas.end <= endWeek) {
    //     // 就在当周，没有意义直接返回
    //     return {
    //       over: false,
    //     };
    //   } else if (startWeek > datas.start && datas.end <= endWeek) {
    //     const weektop = TOPWEEK(data, index, startWeek, endWeek, diff);
    //     return weektop;
    //   } else if (startWeek <= datas.start && datas.end > endWeek) {
    //     const weekbottom = BOTTOMEEK(data, index, startWeek, endWeek, endWeekDate, diff);
    //     return weekbottom;
    //   } else if (startWeek > datas.start && datas.end > endWeek) {
    //     // 这里直接获取两个不就行了
    //     const weektop = TOPWEEK(data, index, startWeek, endWeek, diff);
    //     const weekbottom = BOTTOMEEK(data, index, startWeek, endWeek, endWeekDate, diff);
    //     // 把两个数组合起来返回
    //     const BabyData = weektop.returnBaseData.concat(weekbottom.returnBaseData);
    //     return {
    //       over: true,
    //       returnBaseData: BabyData,
    //     };
    //   }
    // };
    // 下周以后
    // const BOTTOMEEK = (data, index, startWeek, endWeek, endWeekDate, diff) => {
    //   // 这是下周以后的

    //   // 这是上周以前的
    //   // 计算出是几周

    //   // 第一天的时间算出来来了
    //   const oneDay = new Date(data.endDate + " 00:00:00").getTime();

    //   // 直接判断这一天第一天是几号 循环到第一天就知道了
    //   let number = 0;
    //   let startNumber = oneDay;
    //   for (let i = diff - 1; i >= 0; i--) {
    //     if (endWeek === startNumber) {
    //       break;
    //     }
    //     number = number + 1;
    //     startNumber = startNumber - 86400 * 1000;
    //   }
    //   // 算出多少之前有多少天
    //   let weeks = Math.ceil(number / 7);
    //   if (index === 4) {
    //     weeks = 0;
    //     return {
    //       over: false,
    //     };
    //     // 这里返回false吧
    //   } else {
    //     // 其实 weeks 是1 排 index = 1前面正好就有一排
    //     if (weeks > 3) {
    //       weeks = 4 - index;
    //     } else {
    //       // 这里就是weeks
    //     }
    //   }
    //   let countRemove = index + 1;
    //   let returnBaseData = [];
    //   for (let w = 0; w < weeks; w++) {
    //     // 找出前几行一样的数据
    //     const update = transDataBing[countRemove];
    //     const idx = update.findIndex((item, index) => {
    //       return item.id === data.id;
    //     });
    //     // 这里变更位置要通知到他
    //     returnBaseData.push({ loadingIdx: idx, hang: countRemove });
    //     countRemove = countRemove + 1;
    //   }
    //   return {
    //     over: true,
    //     returnBaseData,
    //   };
    // };

    // 上周以前
    // const TOPWEEK = (data, index, startWeek, endWeek, diff) => {
    //   // 这是上周以前的
    //   // 计算出是几周

    //   // 第一天的时间算出来来了
    //   const oneDay = new Date(data.startDate + " 00:00:00").getTime();

    //   // 直接判断这一天第一天是几号 循环到第一天就知道了
    //   let number = 0;
    //   let startNumber = oneDay;
    //   for (let i = 0; i < diff; i++) {
    //     if (startWeek === startNumber) {
    //       break;
    //     }
    //     number = number + 1;
    //     startNumber = startNumber + 86400 * 1000;
    //   }
    //   // 算出多少之前有多少天
    //   let weeks = Math.ceil(number / 7);
    //   if (index === 0) {
    //     weeks = 0;
    //     return {
    //       over: false,
    //     };
    //     // 这里返回false吧
    //   } else {
    //     // 其实 weeks 是1 排 index = 1前面正好就有一排
    //     if (weeks > index) {
    //       weeks = index;
    //     } else {
    //       // 这里就是weeks
    //     }
    //   }
    //   let countRemove = index - 1;
    //   let returnBaseData = [];
    //   for (let w = 0; w < weeks; w++) {
    //     // 找出前几行一样的数据
    //     const update = transDataBing[countRemove];
    //     const idx = update.findIndex((item, index) => {
    //       return item.id === data.id;
    //     });
    //     // 这里变更位置要通知到他
    //     returnBaseData.push({ loadingIdx: idx, hang: countRemove });
    //     countRemove = countRemove - 1;
    //   }
    //   return {
    //     over: true,
    //     returnBaseData,
    //   };
    // };

    // 点击事件
    const getEvent = (e, index) => {
      // 监听点击的时间, 如果大于1s那就打开拖拽, 否则不打开, 且显示出拖拽的框
      clickStart.value = new Date().getTime();
      // context.emit("vipFunction", false);
      statusVip.value = false;
      const type = e.target.dataset.type;
      if (!e.target.dataset.disabled) return;
      if (type) {
        drapInfo.value = e;
      } else {
        const node = e.target.parentNode;
        drapInfo.value = {
          offsetTop: node.offsetTop,
          offsetLeft: node.offsetLeft,
          offsetWidth: node.offsetWidth,
          offsetHeight: node.offsetHeight,
          y: e.y,
          x: e.x,
          dataset: {
            row: node.dataset.row,
            index: node.dataset.index,
            type: node.dataset.type,
            id: node.dataset.id,
          },
        };
      }
      canUp = true;
      dropIndex = index;
      deArr.value[rowIndex.value][index].active = true;

      // 这里用id来判断就可以了

      if(deArr.value[rowIndex.value][index].kua===1){
        context.emit("emupdateActive", {
          over: true,
          id:deArr.value[rowIndex.value][index].id
        })
      }



      setTimeout(() => {
        if (canUp) {
          context.emit("q", {
            index: rowIndex.value,
            over: true,
          });
          context.emit("langEvent", {
            index: rowIndex.value,
            over: "0",
          });
          dragStart(e, index);
        }
      }, 350);
    };
    // 显示事件
    const showEvent = (e, index) => {
      drapInfo.value = e;
      context.emit("getMonthEvent", drapInfo.value);
      deArr.value[rowIndex.value][index].active = false;
      document.onmousemove = null;
    };

    // 开始拖拽
    const dragStart = (event, index, dragStart) => {
      if (!deArr.value[rowIndex.value][index].isEdit) {
        // context.emit('getMonthEvent', drapInfo.value)
        deArr.value[rowIndex.value][index].active = false;
        document.onmousemove = null;
        return false;
      }
      const windowWidth = document.querySelector(".month-area").clientWidth - 5;
      const cubeWidth = document.querySelectorAll(".month-date")[0].clientWidth - 2;
      const cubeHeight = document.querySelectorAll(".month-date")[0].clientHeight;
      const startX = event.clientX;
      const startY = event.clientY;
      const eventRow = event.target.dataset.type ? event.target : event.target.parentNode;
      const row = eventRow.dataset.row;

      let disX = startX - eventRow.offsetLeft;
      let disY = startY - eventRow.offsetTop;
      showMore.value = false;
      let move = false;
      document.onmousemove = (ev) => {
        if (canUp && dropIndex > -1) {
          let e = ev || window.event;
          let l = e.clientX - disX;
          let h = e.clientY - disY;
          l = range(l, 5, windowWidth - eventRow.offsetWidth);
          h = range(
            h,
            -row * cubeHeight - 28,
            (6 - row) * cubeHeight - 28 - eventRow.offsetHeight
          );
          eventRow.style.left = `${l}px`;
          eventRow.style.top = `${h}px`;
        }
        move = true;
      };
      document.onmouseup = (ev) => {
        if (canUp && dropIndex > -1 && move) {
          let e = ev || window.event;
          let d = Math.floor((e.clientX - disX) / cubeWidth); // 移动的距离
          let h = Math.floor((e.clientY - disY - cubeHeight) / cubeHeight) + 1; // 移动的高度
          const item = deArr.value[rowIndex.value][dropIndex];
          if (!item.isEdit) {
            return false;
          }
          const _Index = events.value.findIndex((e) => {
            return e.id == item.id;
          });
          if (d < 0) {
            d = 0;
          }
          if (d > 7) {
            d = 6;
          }

          const _newRow = Number(row) + Number(h);
          let newTime = new Date(
            month.value[_newRow][d].fullDate +
              " " +
              events.value[_Index].hours.split("-")[0]
          );
          const timeStart = new Date(month.value[0][0].fullDate + " 00:00:00").getTime();
          const timeEnd = new Date(
            month.value[month.value.length - 1][6].fullDate + " 23:59:59"
          ).getTime();
          if (isNaN(newTime) || newTime < timeStart || newTime > timeEnd) {
            return false;
          }
          events.value[_Index].actionStartTime = format(
            new Date(newTime),
            "yyyy-MM-dd HH:mm:ss"
          );
          events.value[_Index].actionEndTime = format(
            new Date(
              new Date(events.value[_Index].actionStartTime).getTime() + item.release
            ),
            "yyyy-MM-dd HH:mm:ss"
          );
          events.value[_Index].start = new Date(
            events.value[_Index].actionStartTime
          ).getTime();
          events.value[_Index].end = new Date(
            events.value[_Index].actionEndTime
          ).getTime();
          events.value[_Index] = formatTime(events.value[_Index]);
          context.emit("loadingRefers");
          // 这里开始调接口
          homeCalendar
            .modifyActionTime({
              actionStartTime: events.value[_Index].actionStartTime,
              actionEndTime: events.value[_Index].actionEndTime,
              id: events.value[_Index].id + "",
            })
            .then((res) => {
              if (res.code === 0) {
               
              } else {
                ElMessage({
                  message: h("p", null, [
                    h("span", null, res.msg),
                    h("i", { style: "color: teal" }, "VNode"),
                  ]),
                });
              }
            });

          getCurrentWeek();
          context.emit("exchangeDate", {
            e: events.value[_Index],
          });
          canUp = false;
          deArr.value[rowIndex.value][dropIndex].active = false;
          context.emit("emupdateActive", { over: false });
        } else {
          if (dropIndex > -1) {
            // context.emit('getMonthEvent', drapInfo.value)
            // deArr.value[rowIndex.value][dropIndex].active = false
          }
        }
        document.onmousemove = null;
      };
    };
    const range = (loc, min, max) => {
      if (loc > max) {
        return max;
      } else if (loc < min) {
        return min;
      } else {
        return loc;
      }
    };
    const itemUp = (e) => {
      //   e.stopPropagation();
      const end = new Date().getTime();
      // context.emit("vipFunction", true);
      context.emit("langEvent", {
        index: rowIndex.value,
        over: "1",
      });
      context.emit("q", {
        index: rowIndex.value,
        over: false,
      });
      context.emit("loadingRefers",true);
      context.emit("emupdateActive", { over: false });
      statusVip.value = true;
      if (!e.target.dataset.disabled) return;
      if (dropIndex > -1) {
        deArr.value[rowIndex.value][dropIndex].active = false;
      }
      document.onmousemove = null;
      if (end - clickStart.value < 350) {
        canUp = false;
        context.emit("getMonthEvent", drapInfo.value);
      }
    };
    const closeModel = () => {
      showMore.value = false;
      context.emit("closeModal", true);
    };
    // 模块跳转
    const jumpModel = (e, index) => {
      // console.log(e, index);
    };
    // 切换事件状态
    const eventStatusChange = (e, index) => {
      deArr.value[rowIndex.value][index].complete = e;
    };
    // 完成事件
    const completeEvent = (e, rowIndex, index) => {
      // delModel.value = false;
      // delModelEs.value = false;
      // deArr.value[rowIndex][index].complete = true;
      context.emit("completeEvent", e);
    };
    const editInfo = (e) => {
      // delModel.value = false;
      // delModelEs.value = false;
      // let obj = {};
      // for (let key in e) {
      //   obj[key] = e[key];
      // }
      context.emit("editInfo", e);
    };
    // 删除
    const delEvent = (e) => {
      context.emit("delEvent", e);
    };
    // 查看
    const readInfo = (e) => {
      context.emit("readInfo", e);
    }
    let leftModel = ref(null);
    let topModel = ref(null);
    let delModel = ref(false);
    let delModelEs = ref(false);
    let statusDelModel = ref(false);
    let content = ref({});
    let contentIndex = ref({});
    let ticIndex = ref({});

    // let watchLoader = ref({});
    // let watchLoaderEnd = ref({});
    // let timerEnd = ref(null);
    const levMouse = (e, index1, index2, item) => {
      e.stopPropagation();
      if (qq.value === true) {
        return false;
      } else {
        context.emit("langEvent", {
          index: rowIndex.value,
          over: "0",
        });
        // context.emit("q",{
        //   index:rowIndex.value,
        //   t:true
        // } );
        if (Number(index1) === 4) {
          ticIndex.value = 0;
        } else {
          ticIndex.value = 1;
        }
        // watchLoaderEnd.value = new Date().getTime();
        // eslint-disable-next-line no-debugger
        // clearTimeout(timerEnd.value);
        status.value = true;
        content.value = item;
        contentIndex.value = index2;
        let eye = e.currentTarget;
        // console.log(eye.style.left)
        // console.log(eye.style.top)
        // leftModel.value = `calc(${eye.firstChild.offsetWidth / 2} - 94% / 7)`;
        if(eye.firstChild.offsetWidth/eye.offsetWidth < 0.2) {
          // 当这个事件小于整个日历表占比20%时
          if(eye.firstChild.offsetLeft == 5) {
            leftModel.value = `calc(${eye.firstChild.style.left} + 5px)`
          }else{
            leftModel.value = `calc(${eye.firstChild.style.left} + ${eye.firstChild.offsetWidth}px - 230px)`
          }
        }else{
          leftModel.value = `calc((${eye.firstChild.offsetWidth / 2}px - 110px) + ${eye.firstChild.style.left})`
        }
        topModel.value = `calc(${eye.firstChild.style.top} - 3px)`;
        // deArr.value[index1][index2].mouseShow = 1
        // if (watchLoaderEnd.value - watchLoader.value < 350) {
        //   timerEnd.value = setTimeout(function () {
        //     delModel.value = true;
        //     // delModelEs.value = true;
        //   }, watchLoaderEnd.value - watchLoader.value);
        // } else {
        // status.value = true;
        // content.value = item;
        // contentIndex.value = index2;
        // let eye = e.currentTarget;
        // console.log(eye.style.left)
        // console.log(eye.style.top)
        // leftModel.value = eye.firstChild.style.left;
        // topModel.value = eye.firstChild.style.top;
        // deArr.value[index1][index2].mouseShow = 1
        context.emit("k", { rowIndex: rowIndex.value, b: true });
        // delModel.value = true;
        // delModelEs.value = true;
        // }
      }
    };
    // 事项详情model进入
    const levMouseEs = (e) => {
      delModel.value = true;
      eventModel = 1
      context.emit("langEvent", {
        index: rowIndex.value,
        over: "0",
      });
      // context.emit("q",{
      //   index:rowIndex.value,
      //   t:true
      // } );
      context.emit("k", { rowIndex: rowIndex.value, b: true });
      // statusDelModel.value = true;
    };
    const levMouseOutEs = (e) => {
      // let dom = document.querySelectorAll(".mouse_box");
      // for(let i = 0 ; i <dom.length;i++){
      //   dom[i].style.display="none"
      //   console.log(dom[i])
      // }
      eventModel = 0
      nextTick(() => {
        //   context.emit("q",{
        //   index:rowIndex.value,
        //   t:false
        // } );
        if (qq.value === true) {
        } else {
          context.emit("langEvent", {
            index: rowIndex.value,
            over: "1",
          });
        }

        // statusDelModel.value = false;
        context.emit("k", { rowIndex: rowIndex.value, b: false });
      });
      // watchLoader.value = new Date().getTime();
    };
    const levMouseOut = (e, index1, index2) => {
      e.stopPropagation();
      // deArr.value[index1][index2].mouseShow = 1
      nextTick(() => {
        //   context.emit("q",{
        //   index:rowIndex.value,
        //   t:false
        // } );
        // console.log(qq.value)
        if (!qq.value) {
          context.emit("langEvent", {
            index: rowIndex.value,
            over: "1",
          });
        }
        context.emit("k", { rowIndex: rowIndex.value, b: false });
        if (statusDelModel.value === false) {
          delModelEs.value = false;
        } 
        // setTimeout(() => {
        //   if(eventModel == 0 && !qq.value) {
           
        //   }
        // }, 250)
      });
    };
    const itemOver = (e) => {
      const windowY = document.body.clientHeight;
      if (windowY - e.screenY < 280) {
        placement.value = "top-start";
      } else {
        placement.value = "bottom-end";
      }
    };
    let ArrShow = ref(true)

    // 审批通过
    const approverAccess = e => {
      context.emit('approverAccess', e)
    }
    // 审批拒绝
    const approverReject = e => {
      context.emit('approverReject', e)
    }

    watch(
      () => month.value,
      () => {
        getMonthEvent();
        getCurrentWeek();
      },
      {
        deep: true,
      }
    );
    watch(
      () => events.value,
      () => {
        ArrShow.value = false;
        ArrShow.value = true
        getMonthEvent();
        getCurrentWeek();
      },
      {
        deep: true,
      }
    );
    watch(
      () => dropData.value,
      (oldVal, newVal) => {
        dropMessage.value = oldVal || newVal;
      },
      {
        deep: true,
      }
    );
    onMounted(() => {
      getMonthEvent();
      getCurrentWeek();
      nextTick(() => {
        if (document.getElementsByClassName("month-view")) {
          eleHeight.value =
            document.getElementsByClassName("month-view")[0].offsetHeight || 140;
          window.addEventListener("resize", () => {
            eleHeight.value =
              document.getElementsByClassName("month-view")[0].offsetHeight || 140;
          });
        }
        if (document.querySelector(".day-cube")) {
          dayHalfHeight = document.querySelector(".day-cube").offsetHeight;
        }
      });
    });
    return {
      deArr,
      rowArr,
      getEvent,
      getStyle,
      checkRank,
      showMore,
      moreData,
      getInfo,
      eleHeight,
      day,
      dragStart,
      current,
      itemUp,
      getMoreEvent,
      moreUp,
      closeModel,
      showEvent,
      jumpModel,
      eventStatusChange,
      completeEvent,
      editInfo,
      delEvent,
      placement,
      itemOver,
      // Bran,
      // Warning,
      levMouseOut,
      levMouse,
      leftModel,
      topModel,
      delModel,
      levMouseEs,
      delModelEs,
      levMouseOutEs,
      statusDelModel,
      content,
      contentIndex,
      status,
      ticIndex,
      statusVip,
      statusUserUs,
      qq,
      ArrShow,
      formatDurationTime,
      userId,
      approverAccess,
      approverReject,
      View,
      readInfo
    };
  },
};
</script>

<style scoped lang="scss">
.month-event-container {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.month-event-item-container {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  top: 28px;
}
.month-event-cell {
  position: absolute;
  z-index: 2;
  top: 0;
  z-index: 499;
  font-size: 12px;
  padding: 2px 0 2px 0;
  border-radius: 2px;
  background: rgb(234, 244, 252);
  color: var(--ss-color-primary);
  box-sizing: border-box;
  cursor: pointer;
  min-width: calc(100% / 7 - 10px);
  display: flex;
  align-items: center;
  border: 1px solid #fff;
  border-left: none;
  border-right: none;
  height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  //   overflow: hidden;
  .event-data {
    // position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 5px;
    flex: 1;
    // display: inline-block;
  }
  .event-complete {
    // span{
    //   color: #909399 !important;

    // }
    text-decoration: line-through;
  }
  &::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 3px;
    height: 3px;
    border-right: 1px solid var(--ss-color-primary);
    border-bottom: 1px solid var(--ss-color-primary);
    opacity: 0.7;
  }
}
.month-event-disabled {
  &::after {
    display: none;
  }
}
.month-event-cell .month-event-cell-content {
  flex: 1;
  overflow: hidden;
  height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-event-cell .resize {
  width: 15px;
  display: flex;
  justify-content: flex-end;
  :deep(.i-icon) {
    position: relative;
    top: 2px;
  }
}
.month-event-cell .resize-icon {
  user-select: none;
  pointer-events: none;
}
.month-event-item-container .month-event-same-day {
  background: transparent !important;
  // padding-left: 15px;
}
.month-event-item-container .month-event-same-day .dotted {
  position: absolute;
  top: 0;
  left: 5px;
  bottom: 0;
  margin: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ss-color-primary);
  opacity: 0.8;
}
.month-event-item-container .month-event-same-day:hover {
  background: rgba(214, 236, 240, 0.5) !important;
}
.month-event-cell:hover .resize {
  cursor: col-resize;
  height: 17px;
}
.month-event-item-container .month-event-row {
  height: 100%;
  position: relative;
}
.more-event-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.more-event-box .more-event-cell {
  flex: 1;
  overflow: hidden;
  text-align: center;
  margin-top: 2px;
  cursor: pointer;
  font-size: 12px;
  color: #909399;
}

.more-event-box .more-event-cell:hover {
  color: var(--ss-color-primary);
}

.month-hover {
  opacity: 0.5 !important;
}
.month-active {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  z-index: 999;
  // float: right;
}
.event-model-container {
  position: absolute;
  z-index: 10;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.event-model-container .more-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
}
.event-model-container .more-content {
  position: absolute;
  background: #fff;
  height: 180px;
  top: 0;
  left: 0;
  min-width: 190px;
  width: calc(90% / 7 - 2px);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
  z-index: 999;
  transition: 0.2s;
}
.event-model-container .more-content .more-title-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f2f6fc;
  padding: 5px;
  font-size: 14px;
  color: #303133;
}
.event-model-container {
  :deep(.el-scrollbar) {
    height: calc(100% - 33px);
    position: static;
  }
}
.event-model-container .more-content .more-evnet-list {
  margin: 5px 0;
  padding: 0 5px;
  max-height: calc(100% - 20px);
  overflow: hidden;
}
.event-model-container .more-content .more-evnet-list .more-event-item {
  border-radius: 2px;
  background: var(--el-color-primary-light-9);
  color: var(--ss-color-primary);
  padding: 0 5px 0 0;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  margin: 2px 2px 0;
  overflow: hidden;
  position: relative;
  min-width: calc(100% - 14px);
  z-index: 2;
  display: flex;
  &::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 3px;
    height: 3px;
    border-right: 1px solid var(--ss-color-primary);
    border-bottom: 1px solid var(--ss-color-primary);
    opacity: 0.7;
  }
}
.event-model-container .more-content .more-evnet-list .more-event-disabled {
  &::after {
    display: none;
  }
}
.event-model-container .more-close-btn {
  cursor: pointer;
}
.move-cell {
  position: fixed;
  z-index: 10;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 2px;
  box-sizing: border-box;
  background: #000;
  color: #fff;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  display: flex;
  .move-content {
    flex: 1;
    overflow: hidden;
  }
}
.mouse_box {
  position: absolute;
  top: 114%;
  left: 0;
  width: 220px;
  // height: 132px;
  margin-left: -5px;
  z-index: 999999999999999999999;
  margin-top: 51px;

  //   float: left;
  //   pointer-events:none;
  .mouse_box_nav {
    width: 106%;
    min-height: 140px;
    max-height: 280px;
    // margin-top: 22px;
    // margin-left: -12%;
    background: #fff;
    // opacity: 0.9;
    box-shadow: rgb(0 0 0 / 12%) 0px -1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 5px;
    //   right: unset;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.mouse_boxm1 {
  position: absolute;
  left: 0;
  width: 220px;
  // height: 132px;
  margin-left: -5px;
  z-index: 999999999999999999999;
  //   float: left;
  //   pointer-events:none;
  margin-top: -108px;

  .mouse_box_nav {
    width: 106%;
    height: 140px; //这个比较特殊 直接在这里减五
    // margin-top: 22px;
    // margin-left: -12%;
    background: #fff;
    // opacity: 0.9;
    box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 5px;
    //   right: unset;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.toc {
  font-size: 14px;
  color: var(--el-text-color-regular);
  padding-left: 4px;
  padding-top: 5px;
}
.timer {
  font-size: 12px;
  color: var(--el-text-color-regular);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 6px;
  padding: 0 4px;
}
.showBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  // padding-left: 6px;
  border-bottom: 1px solid #f0f0f0;
  padding: 2px 0 5px 0;
}
.delay03 {
  --animate-delay: 0.2s;
}
.duration {
  --animate-duration: 0.2s;
}
.updateRever {
  width: 0 !important;
  height: 0 !important;
  position: fixed !important;
  left: -1000px !important;
  top: -1000px !important;
}
.tag-name{
  background: #e7f5ee;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  word-spacing:10px;
  max-width:86px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-detail-data{
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
}
.more-event-data{
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}
:deep(.el-button+.el-button){
  margin-left: 0;
}
:deep(.el-button--small [class*=el-icon]+span){
  margin-left: 0;
}
</style>
